<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/element-plus.css">
</head>
<body>
<div id="view">
    <el-row>
        <el-col :span="6" :offset="9">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="用户名注册" name="first">
                    <!--ref form表单的名字 this.$ref.名称-->
                    <!--model 表单的数据-->
                    <!--rules 校验规则-->
                    <!--label-width label 的宽度-->
                    <!--status-icon 是否显示检验结果-->
                    <el-form ref="userForm" :model="user"
                             :rules="userRule" label-width="80px" class="demo-ruleForm"
                             size="default" status-icon>
                        <!--label 输入框外面显示的内容 -->
                        <!--prop 绑定的是 rules 里面的规则的属性名-->
                        <el-form-item label="用户名" prop="username">
                            <!--v-model -->
                            <el-input v-model="user.username" prefix-icon="user-filled"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="user.password" show-password
                                      prefix-icon="lock"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="repass">
                            <el-input type="password" v-model="user.repass" prefix-icon="lock"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="captcha">
                            <el-row>
                                <el-col :span="10">
                                    <el-input v-model="user.captcha" prefix-icon="check"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <img src="/captcha"/>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <!--<el-form-item>-->
                        <el-row>
                            <el-col :span="4" :offset="8">
                                <el-button type="primary" @click="submitForm()">注册</el-button>
                            </el-col>
                            <el-col :span="4" :offset="4">
                                <el-button @click="resetForm()">重置</el-button>
                            </el-col>
                        </el-row>
                        <!--</el-form-item>-->
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="手机注册" name="second">手机注册</el-tab-pane>
                <el-tab-pane label="邮箱注册" name="third">邮箱注册</el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</div>
<script src="/js/vue.js"></script>
<script src="/js/element-plus.js"></script>
<script src="/js/icons-vue.js"></script>
<script src="/js/axios.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            // 1. 声明校验的方式
            const validatePass = (rule, value, callback) => {
                // value -- 输入的内容 callback -- 回显信息
                const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}$/
                if (!reg.test(value)) {
                    callback(new Error("包含大小写字母和数字的组合，不能使用特殊字符，长度在 6-16 之间"))
                }
                callback()
            }
            const validateName = (rule, value, callback) => {
                const reg = /^[a-zA-Z][a-zA-Z0-9_]{2,9}$/
                if (!reg.test(value)) {
                    callback(new Error("以字母开头，长度在3~10之间，只能包含字母、数字和下划线"))
                } else {
                    // TODO 校验 用户名是否可用
                    axios.get("/checkName?username=" + value).then(res => {
                        if (res.data.code === 1) {
                            callback()
                        } else {
                            callback(new Error("用户名已经被注册"))
                        }
                    })
                }
            }
            const validateRepass = (rule, value, callback) => {
                console.log(value)
                console.log(this.user.password)
                if (value !== this.user.password) {
                    callback(new Error("两次密码不一致"))
                }
                callback()
            }
            return {
                activeName: "first",
                user: {
                    username: 'admin1',
                    password: '123Qwe',
                    repass: '',
                    captcha: ''
                },
                userRule: {
                    username: [
                        // message 校验失败的提示信息 trigger 什么时候触发校验
                        {required: true, message: '请填写用户名', trigger: 'blur'},
                        {validator: validateName, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        // {min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur'},
                        // 2. validator ： 校验的方法名 trigger 触发的时机
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    repass: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        {validator: validateRepass, trigger: 'blur'}
                    ],
                    captcha: []
                }
            }
        },
        methods: {
            submitForm() {
                console.log("submit")
                console.log(this.user)
                // 获取到页面的form表单 valid -- 当前form表单校验是否通过
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        // TODO 提交注册请求
                        axios.post("/user/register", this.user).then(res => {
                            if (res.data.code === 1) {
                                this.$message({
                                    message: "注册成功，请登录",
                                    type: "success"
                                })
                                setTimeout(() => {
                                    location.href = "/login"
                                }, 500)
                            }
                        })
                    } else {
                        // Message 弹框
                        this.$message.error('请按照要求填写内容之后在提交')
                    }
                })
            },
            resetForm() {
                console.log("reset")
            }
        }
    })
    // 使用 element-plus
    app.use(ElementPlus)
    // 注册图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount("#view")
</script>
</body>
</html>